<template>
	<view class="box">
		<!-- 背景颜色 -->
		<view class="bg">
		</view>
		<view class="nav flex">
<!-- 		<view class="nav flex" v-if="type==2"> -->
			<view :class="active==index?'showColor':''" v-for="(item,index) in nav_list" :key="index"
				@click="checkNav(index)">
				<view class="nav-title">
					{{item}}
					<view class="nav-tag"></view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="title f-w" v-if="killProudctSearch.type ==1 && list.length" >
				<view class="bold f32">距离结束</view>
				<!-- 倒计时 -->
				<view class="countdown f-w">
					<view class="countdown-img f-w">
						<image src="https://jw.xzsw2021.com/static/index/icon_48@2x.png" mode=""></image>
					</view>
					<view class="f22">
						<u-count-down :time="secKill.killEndMillisecond" format="HH:mm:ss"></u-count-down>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<!--  -->
			<view class="card">
				<view class="title2 f28 bold">{{marketname}}</view>
			</view>

			<view class="card" v-for="(item,index) of list" :key="index" @click="toKillProduct(item)">

				<view class="content f-w">
					<view class="left">
						<view class="img f-w" style="width: 100%;height: 100%;">
							<image :src="item.image" mode=""></image>
						</view>
					</view>
					<view class="right">
						<view class="one hide-line f26">{{item.store_name}}</view>
						<view class="two f-w f24">
							<view class="red ">
								￥<text class="f44 bold">{{item.price}}</text>
							</view>
							<view class="c999">￥{{item.ot_price}}</view>
						</view>
						<view class="three fw-bt">
							<!-- 进度条 -->
							<view class="process">
								<u-line-progress :percentage="item.percent" inactiveColor="#FDC29E" :showText="false"
									activeColor="#FF8027">

								</u-line-progress>
								<!-- <text class="u-percentage-slot">已抢购{{(item.sales/item.stock*1).toFixed(2)*100 }}%</text> -->
								<text class="u-percentage-slot">已抢购{{item.percent}}%</text>
							</view>
							<!-- 添加按钮 -->
							<view>
								<u-button type="success" v-if="killProudctSearch.type ==1" size='mini' shape="circle"
									text="马上抢">
								</u-button>
								<u-button type="primary" text="查看" shape="circle" size='mini' v-else></u-button>
								<!-- <my-numberBox :info="item" @cartDel='cartDel(index)' @cartAdd='cartAdd(index)'>
								</my-numberBox> -->
								<!-- 	<u-number-box v-model="value" @change="onChange">
									<view slot="minus" class="minus">
										<image name="minus" src="https://jw.xzsw2021.com/static/client/icon_83@2x.png" mode=""></image>
									</view>
								 <text slot="input" style="width: 50rpx;text-align: center;font-weight: bold;"
										class="input">{{value}}</text>
									<view slot="plus" class="plus">
										<image name="plus" src="https://jw.xzsw2021.com/static/client/icon_84@2x.png" mode=""></image>
									</view>
								</u-number-box> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<!-- <cart :list="carlist" @change='cartcancel' @buy='buying'></cart> -->
	</view>
</template>

<script>
	import cart from '@/components/cart.vue'

	import {
		getSecKillProductListApi,
		getSecKillTimeApi
	} from '@/api/product.js'

	import Cache from '@/util/cache.js'
	export default {
		components: {
			cart
		},
		data() {
			return {
				choosecart: [],
				secKill: {
					killEndMillisecond: 0
				},
				carlist: [],
				marketname: '',
				page: 1,
				value: 1, //
				timer: '',
				type: 2, //今日秒杀 2.秒杀
				djs: 0, //倒计时
				stop: '', //倒计时时间
				nav_list: ['抢购中', '即将开抢'], //
				active: 0, //
				list: [],
				info: '',
				killProudctSearch: {
					page: 1,
					limit: 15,
					type: 1, //秒杀商品状态类型  1抢购中  2即将开枪
				}
			}

		},
		onLoad(options) {
			this.type = options.type
			if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: "秒杀"
				})
			}
			this.marketname = uni.getStorageSync('market').mar_name

		},
		onShow() {
			this.page = 1
			this.list = []
			this.getms()
			this.killProudctSearch.page = 1

			this.getkilllist()
		},
		// onHide() {
		// 	this.endInter()
		// },
		// onUnload: function() {
		// 	this.endInter()
		// },
		onReachBottom() {
			this.killProudctSearch.page += 1
			console.log('滚动')
			this.getkilllist()
		},
		methods: {
			toKillProduct(product) {
				if (this.killProudctSearch.type == 2) {
					// return;
				}
				uni.navigateTo({
					// url: '/pages/client/shop/shop-detail/shop-detail/?id=' + product.product_id
					url: `/pages/client/shop/shop-detail/shop-detail?id=${product.product_id}&type=1`
				})
			},
			buying() {
				let arr = []
				let list = this.carlist
				list.forEach(item => {
					if (item.check && item.cart_num > 0) {
						arr.push(item)
					}

				})
				uni.navigateTo({
					url: "/pages/client/order/order-sure/order-sure?arr=" + JSON.stringify(arr)
				})


			},
			cartcancel(e) {
				this.choosecart = e
				this.getkilllist()
			},


			// 购物车减去
			cartDel(e) {
				let list = this.list
				let item = list[e]
				uni.showLoading({
					mask: true
				})
				this.$request('user/cart/change/' + item.cart_id, {
					cart_num: item.cartnum - 1
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: "添加成功"
						})
						this.getkilllist()
						// list[e].cartnum--
						// this.cate3_list=list
						// this.$forceUpdate()

					}
				})
			},
			// 购物车加
			cartAdd(e) {
				let list = this.list
				let item = list[e]
				let data = {
					cart_num: 1,
					is_new: 0,
					product_attr_unique: item.unique,
					product_id: item.product_id,
					product_type: item.product_type
				}
				uni.showLoading({
					mask: true
				})
				this.$request('user/cart/create', data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: "添加成功"
						})
						// this.getkilllist()
						// list[e].cartnum++
						// this.cate3_list=list
						// this.$forceUpdate()

					}
				})
			},


			// 获取购物车的列表
			getcartlist(arr) {
				let arr2 = []
				this.$request('user/cart/lst', {}, 'GET').then(res => {
					let list = res.data.list
					list.forEach(item => {
						item.list.forEach(item2 => {
							arr.forEach(item3 => {
								if (item2.product_id == item3.product_id) {
									item2.check = true
									item3.cartnum = item2.cart_num
									item3.cart_id = item2.cart_id
									arr2.push(item2)
								}

							})
						})
					})
					if (this.killProudctSearch.page > 1) {
						this.list.push(...arr)
						console.log('push')
					} else {
						console.log('set')
						this.list = arr
					}
					this.carlist = arr2
				})
			},
			// 根据菜市场id获取秒杀的商品
			getkilllist() {
				let market = JSON.parse(Cache.get('market'))
				this.killProudctSearch.mar_id = market.id
				getSecKillProductListApi(this.killProudctSearch).then(res => {
					res.data.list.forEach(item => {
						item.percent = item.stock === 0 ? 0 : (item.sales * 100 / item.stock).toFixed(2);
					})
					this.getcartlist(res.data.list)
				}).catch(err => {

				})

			},
			getms() {
				getSecKillTimeApi().then(res => {
					this.secKill = res.data
					this.secKill.killEndMillisecond =
						Math.ceil(res.data.seckillEndTime * 1000 - (new Date()).getTime())
				}).catch(err => {

				})
				this.$request('store/product/seckill/select', {}, 'GET').then(res => {
					this.info = {
						stop: res.data.seckillEndTime
					}
				})
			},
			endInter: function() {
				let v = this.info
				clearInterval(v.timer);
			},
			// 切换标签栏
			checkNav(index) {
				this.active = index
				
				this.killProudctSearch.type = index + 1
				this.killProudctSearch.page = 1
				// if(this.killProudctSearch.type == 2){
					
				// }
				
				
				this.getkilllist()
			},
			// 倒计时监听
			changeTime(time) {
				console.log('结束');
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			// 切换值
			onChange(e) {
				console.log('值', e);

			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
	.u-count-down__text{
		color: #FFFFFF !important;
	}
</style>


<style lang="scss" scoped>
	.u-count-down__text{
		color: #FFFFFF !important;
	}
	.box {
		overflow: hidden;

		.red {
			color: #F83535;
		}

		position: relative;

		.bg {
			position: absolute;
			width: 750rpx;
			height: 375rpx;
			background: linear-gradient(180deg, #109C7A 0%, #F5F5F5 100%);
		}

		.nav {
			position: relative;
			padding: 25rpx 30rpx;
			color: #fff;
			font-size: 32rpx;

			&>view {
				margin-right: 60rpx;

				.nav-title {
					position: relative;
				}

				.nav-tag {
					position: absolute;
					left: 50%;
					bottom: -15rpx;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					border-radius: 3rpx;
				}
			}
		}

		.showColor {
			font-weight: bold;

			.nav-tag {
				background: #FFFFFF;
			}
		}

		.list {
			margin: 30rpx auto 0;
			position: relative;
			width: 690rpx;
			min-height: calc(100vh - 30rpx);
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0 30rpx;
			background-color: #fff;
			box-sizing: border-box;
			overflow: hidden;

			.title {
				margin: 15rpx 0 0;

				.countdown {
					margin-left: 16rpx;
					margin-top: 2rpx;
					padding: 2rpx 12rpx;
					color: #fff;
					background: linear-gradient(90deg, #08B889 0%, #4CC7A6 100%);
					border-radius: 16rpx;

					.countdown-img {
						margin-right: 6rpx;
						width: 23rpx;
						height: 22rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

				}
			}

			.card {
				margin: 26rpx 0 0;

				.content {
					padding: 24rpx 0 30rpx;
					border-bottom: 1rpx solid #EEEEEE;

					.left {
						flex-shrink: 0;
						width: 160rpx;
						height: 160rpx;
						// background-color: #18BC37;

						image {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}

					.right {
						flex: 1;
						margin-left: 18rpx;
						overflow: hidden;

						.two {
							margin: 20rpx 0;
							align-items: flex-end;

							.c999 {
								margin: 0 0 5rpx 5rpx;
								text-decoration: line-through;
							}
						}

						.three {
							.process {
								width: 236rpx;
								height: 26rpx;
								position: relative;

								.u-percentage-slot {
									position: absolute;
									left: 10rpx;
									top: 0;

									// padding: 2rpx 10rpx;
									// min-width: 200rpx !important;
									// background: linear-gradient(64deg, #FF8027, #FB5600);
									color: #fff;
									border-radius: 100rpx;
									font-size: 20rpx;
									white-space: nowrap;
									// margin-right: -10rpx;
								}
							}

						}
					}
				}
			}
		}

		.minus {
			width: 42rpx;
			height: 42rpx;
			border-width: 1px;
			border-color: #E6E6E6;
			@include flex;
			justify-content: center;
			align-items: center;

			image {
				width: 42rpx;
				height: 42rpx;
			}
		}

		.input {
			padding: 0 10rpx;
		}

		.plus {
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			image {
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
</style>
